<template>
  <div class="material">
    <div class="card-contant">
      <div class="header-contant">
        <div class="avatar-contant">
          <img :src="avatar" class="avatar">
          <img :src="photo" class="photo" @click="camera()">
        </div>
        <div class="right">
          <div class="text">消息通知</div>
          <mySwitch @change="changeSave" :open="info.notice_status == 0"></mySwitch>
        </div>
      </div>
      <div class="name">
        <div class>{{info.nickname}}</div>
        <img :src="arrow" alt>
      </div>
      <div class="line"></div>
      <div class="phone-contant">
        <img :src="phone" class="phone-img">
        <dir class="phone-box">
          <div class="text">手机号码</div>
          <div v-if="!editFlag" class="number">{{info.mobile}}</div>
          <input
            v-if="editFlag"
            class="input"
            v-model="inputPhone"
            oninput="if(value.length>11)value=value.slice(0,11)"
            placeholder="请输入新的手机号"
            type="number"
            @blur="inputBack()"
          >
        </dir>
        <div class="edit-box"></div>
        <div :class="editFlag?'button-contant1':'button-contant'" @click="changtType()">
          <img :src="edit" alt v-show="!editFlag">
          <span>{{editFlag?'完成':'修改'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions, mapState } from "vuex";
import mySwitch from "../../components/switch/index";
import wx from "weixin-js-sdk";
export default {
  name: "material",
  data() {
    return {
      avatar: require("../../assets/person/avatar.png"),
      photo: require("../../assets/person/photograh.png"),
      arrow: require("../../assets/person/arrow.png"),
      phone: require("../../assets/person/phone.png"),
      edit: require("../../assets/person/edit.png"),
      editFlag: false,
      inputPhone: "",
      inputNickname: ""
    };
  },
  created() {
    this.change(false);
    this.avatar = this.info.avatar;
  },
  methods: {
    ...mapActions("Home", ["change"]),
    changtType() {
      if (this.editFlag) {
        this.postData();
        this.editFlag = false;
      } else {
        this.editFlag = true;
      }
    },
    changeSave(type) {
      if (!type) {
        this.$http
          .post("/notice/Change", {
            status: 1
          })
          .then(res => {
            if (res.data.errno == 0) {
              console.log("成功");
              this.$dialog.toast({
                mes: "开启成功",
                timeout: 1500,
                icon: "success"
              });
            } else {
              this.$dialog.toast({
                mes: "开启失败",
                timeout: 1500,
                icon: "error"
              });
            }
            console.log(res);
            this.$dialog.loading.close();
          });
      } else {
        this.$http
          .post("/notice/Change", {
            status: 0
          })
          .then(res => {
            if (res.data.errno == 0) {
              this.$dialog.toast({
                mes: "关闭成功",
                timeout: 1500,
                icon: "success"
              });
            } else {
              this.$dialog.toast({
                mes: "关闭失败",
                timeout: 1500,
                icon: "error"
              });
            }
            console.log(res);
            this.$dialog.loading.close();
          });
      }
    },
    // 更新修改信息
    postData() {
      this.$dialog.loading.open("正在保存");
      this.$http
        .post("/user/Register", {
          mobile: this.inputPhone,
          nickname: this.inputNickname,
          avatar: this.avatar
        })
        .then(res => {
          if (res.data.errno == 0) {
            console.log("成功");
            this.$dialog.toast({
              mes: "保存成功",
              timeout: 1500,
              icon: "success"
            });
            this.info.mobile = this.inputPhone;
          } else {
            this.$dialog.toast({
              mes: "保存失败",
              timeout: 1500,
              icon: "error"
            });
          }
          console.log(res);
          this.$dialog.loading.close();
        });
    },
    camera() {
      const that = this;
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          that.avatar = localIds.toString();
          that.upload(localIds); // 更新
        }
      });
    },
    getImg(localIds) {
      const that = this;
      wx.getLocalImgData({
        localId: localIds, // 图片的localID
        success: function(res) {
          var localData1 = res.localData; // localData是图片的base64数据，可以用img标签显示
          that.avatar = localData1;
        }
      });
    },
    // 上传图片
    upload(localIds) {
      const that = this;
      wx.uploadImage({
        localId: that.avatar, // 需要上传的图片的本地ID，由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function(res) {
          var serverId = res.serverId; // 返回图片的服务器端ID
          // that.down(serverId); // 下载
          that.$http
            .post("/upload", {
              serverId: serverId
            })
            .then(res => {
              if (res.data.errno == 0) {
                that.$dialog.toast({
                  mes: "上传成功",
                  timeout: 1500,
                  icon: "success"
                });
                that.avatar = res.data.data.imgUrl;
                that.postData();
              } else {
                that.$dialog.toast({
                  mes: "上传失败",
                  timeout: 1500,
                  icon: "error"
                });
              }
              that.$dialog.loading.close();
            });
        }
      });
    },
    // 下载图片,
    down(Id) {
      const that = this;
      wx.downloadImage({
        serverId: Id.toString(), // 需要下载的图片的服务器端ID，由uploadImage接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function(res) {
          var localId = res.localId; // 返回图片下载后的本地ID
          that.getImg(localId);
        }
      });
    }
  },
  computed: {
    ...mapState({
      info: status => status.Person.personInfo
    })
  },
  components: {
    mySwitch
  }
};
</script>
